Day 20 - 動態調整 CSS - 行距

Sample

1. antd-progress
2. antd-table-row-height

Code

App.js

<-- Add Radio --> 
import { Table, Button, Layout, Input, ConfigProvider,Radio } from "antd";
const [customStyle, setCustomStyle] = useState("py-style-2");
const [size, setSize] = useState('small');

const handleSizeChange = (e) => {
    setSize(e.target.value);
    if (e.target.value === "small") {
      setCustomStyle("py-style-2");
    } else {
      setCustomStyle("py-style-1");
    }
};

<Radio.Group value={size} onChange={handleSizeChange}>
  <Radio.Button value="large">Large</Radio.Button>
  <Radio.Button value="small">Small</Radio.Button>
</Radio.Group>

App.css

.py-style-1 .ant-table-tbody > tr > td {
  padding: 50px;
}

.py-style-2 .ant-table-tbody > tr > td {
  padding: 20px;
}

Result

(1) default 為 small

(2) 新增個幾列

(3) 調成 Large

push & deploy

• commit-day 20 - 行距
• deploy#18

(Optional) 挑戰

使用 Slider 調動行距